<template>
<div  class="mui-content mui-scroll-wrapper" style="padding-top: 0px">
    <div class="mui-scroll">
        <div class="lineItem">
            <!-- 订单详情  -->
            <CrossLine></CrossLine>
            <ul style="background: #fff;">
                <img src="static/img/di.png" style="position:absolute;width:100%"/>
                <li class="mui-table-view-cell" style="padding-top: 20px;">  
                    <div>
                    <span class="icon-dingw"></span>
                    <div class="address-info">
                        <div class="address-text">
                        <span class="address-name">{{$store.getters.user.name}}</span>
                        <span style="margin-left:30px;font-size:13px;">{{$store.getters.user.mobile}}</span>
                        </div>
                        <span class="usertit">地址:</span> 
                        <span  class="userpams">{{$store.getters.user.area+$store.getters.user.address}}</span>
                    </div>
                    </div>
                </li>
            </ul>
            <!-- 流程图 -->
            <div class="spinner" @tap="switchSpinnerStatus"> 
                <span class="left">
                    <span class="icon-liucheng-01"></span>
                    <span style="margin-left:5px;display:inline-block">{{descriptionTime}}</span>
                    <span style="margin-left:10px">{{title}}</span>
                </span>
                <span class="right i-c icon-you-01"></span>
            </div>
            <div class="schedule" style="width:100%;background:#fff;" v-show="spinnerStatus">
                <div style="padding:10px 0px 0px 40px">
                    <el-steps :space="55" direction="vertical" :active="directionlist.length">
                        <div v-for="v in directionlist">
                            <el-step  :title="v.title" :description="v.descriptionTime"></el-step>
                        </div>
                        
                    </el-steps>
                </div>
            </div>
            <div class="carlist biding">
                <div class="c">
                    <ul class="mui-table-view">
                        <li @tap="goCarDetail(currentCar.carSeriesId, currentCar.carId)"> 
                            <crossLine></crossLine>
                            <div class="lstTop">
                                <div class="titpic">
                                    <img style="float:left;" src="static/img/hqgic.png" alt=""><span style="float:left;color:#333333;">江苏环球港汽车城</span><!--<span style="float:right;color:#ff6a27;">本车系10人在拼单</span>-->
                                </div>
                            </div>
                            <div class="lst" >
                                <div class="lstImg" v-if="currentCar.pic==null || currentCar.pic==''">
                                    <img src="static/img/noCarPic.png">
                                </div>
                                <div class="lstImg" v-else>
                                    <img :src="$store.state.appData.imgUrl+currentCar.pic">
                                </div>
                                <div class="lstMsg">
                                    <p class="carName">{{currentCar.carName}}</p>
                                    <p class="carColor">颜色:<span>{{currentCar.color}}</span>
                                        <span class="orderPrice" v-if="currentCar.guidePrice == null">暂无指导价</span>
                                       <!--  <span class="orderPrice" v-else>￥{{initPrice(currentCar.bidPrice)}}</span> -->
                                    </p>
                                    <p class="carPrice">指导价:{{currentCar.guidePrice}}万起 
                                       <!--  <span style="color:#ff6a27;float:right;">{{currentCar.bidPrice}}</span> -->
                                    </p>
                                </div>
                            </div>
                        </li>
                        <!-- 上牌点 -->
                        <li style="margin:0px 0px 0px 0px;padding-left:15px;padding-right:10px;;height:30px;">
                            <div class="mui-input-row">
                                <label style="width:70px;">上牌地点:</label>
                                <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="currentCar.license"  maxlength="20" type="text" class="mui-input-clear"  readonly="readonly">
                            </div>
                        </li>
                        <!-- 保险 -->
                        <li style="margin:0px 0px 0px 0px;padding-left:15px;padding-right:10px;height:30px;">
                            <div class="mui-input-row">
                                <label style="width:70px;">购买保险:</label>
                                <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="isSurance"  maxlength="20" type="text" class="mui-input-clear"  readonly="readonly">
                            </div>
                        </li>
                        <!-- 贷款 -->
                        <li style="margin:0px 0px 0px 0px;padding-left:15px;padding-right:10px;;height:30px;">
                            <div class="mui-input-row">
                                <label style="width:70px;">申请贷款:</label>
                                <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="isloan"  maxlength="20" type="text" class="mui-input-clear"  readonly="readonly">
                            </div>
                        </li>
                        <li style="margin:0px 0px 0px 0px;padding-left:15px;padding-right:10px;;height:30px;" v-show="currentCar.salerName">
                            <div class="mui-input-row">
                                <label style="width:70px;">导购人员:</label>
                                <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="currentCar.salerName"  maxlength="20" type="text" class="mui-input-clear"  readonly="readonly">
                            </div>
                        </li>
                        <!-- 备注 -->
                        <li style="margin:0px 0px 0px 0px;padding-left:15px;padding-right:10px;border-bottom: 1px solid #e9e9e9;">
                            <div class="mui-input-row" v-if="currentCar.remark ==''">
                                <label  style="width:70px;">用户备注:</label>
                                <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="zanwu"  maxlength="20" type="text" class="mui-input-clear"  readonly="readonly">
                            </div>
                            <div class="mui-input-row" v-else>
                                <label  style="width:70px;">用户备注:</label>
                                <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="currentCar.remark" maxlength="20" type="text" class="mui-input-clear"  readonly="readonly">
                            </div>
                        </li>
                        <li style="border-bottom: 1px solid #e9e9e9;">
                            <div class="priceInfo" v-if="currentCar.bidPrice == null">
                                <span class="left">最新报价:</span>
                                <span class="right">暂无报价</span>
                            </div>
                            <div class="priceInfo" v-else>
                                <span class="left">最新报价:</span>
                                <span class="right">￥{{initPriceYuan(currentCar.bidPrice)}}</span>
                            </div>
                            <div class="priceInfo">
                                <span class="left">询价金额:</span>
                                <span class="right" style="color:#ff6a27">￥{{initPrice(currentCar.orderPrice)}}</span>
                            </div>
                        </li>
                        <li style="padding-top:10px;padding-bottom:10px">
                            <div class="orderInfo">
                                <span class="left"  v-show="orderInfo.orderId">订单ID:</span>
                                {{orderInfo.orderId}}
                            </div>
                            <!-- <div class="orderInfo">
                                <span class="left">支付类型:</span>
                            </div> -->
                            <div class="orderInfo" v-show="orderInfo.paymentNumber">
                                <span class="left">支付流水号:</span>
                                {{orderInfo.paymentNumber}}
                            </div>
                            <div class="orderInfo" v-show="orderInfo.submission">
                                <span class="left">询价支付时间:</span>
                                 {{orderInfo.submission}}
                            </div>
                            <div class="orderInfo" style="margin-bottom:0px" v-show="currentCar.completeDate">
                                <span class="left" >最新报价时间:</span>
                                {{formatTime(currentCar.completeDate)}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <nav class="mui-bar mui-bar-tab footer" >
        <div class="placeOrder"  v-show="currentCar.state==6" @tap="goPayment(currentCar)">去付款</div>
        <div class="affirmCrowdorder" :class="currentCar.bidPrice? '':'unuse'"  v-show="currentCar.state==0" @tap="affirmCrowdorder(currentCar)"> 
            转入拼单
        </div>
        <div class="placeOrder" v-show="currentCar.state==0" @tap="placeOrder(currentCar)">
            立即下单
        </div>
    </nav>
</div>
</template>

<script>
    import CrossLine from '@/components/base/cross-line/cross-line'
    import utils from '@/utils/utils'
    import mui from "static/js/mui"
    import storage from '@/utils/localstorage'
    import {getCustomerOrderAction, getBidOrderInfo} from "@/api/order"
    // import '_element-ui@1.4.13@element-ui/lib/theme-default/index.css'
    export default {
        components: {
            CrossLine
        },
        data() {
            return {
                zanwu: '暂无',
                spinnerStatus: false,
                descriptionTime: '',
                title: '',
                userInfo:{},
                currentCar: {},
                directionlist: [
    
                ],
                orderInfo:{},
                obj:{
                    carSeriesId:"",
                    carId: '',
                    customerId:this.$store.getters.user.id
                }
            }
        },
        props: {},
        watch: {},
        methods: {
            getParams() {
                //获取路由参数'
                let routeVal = this.$route.params
                if(JSON.stringify(routeVal)!=="{}"){
                    if(typeof(routeVal.currentCar) !== 'undefined'){
                        this.currentCar = routeVal.currentCar
                        //this.currentCar.completeDate =  utils.time.formatDatetwo(this.currentCar.completeDate)
                        //console.log(this.currentCar)
                        this.init()
                    }
                }else{
                    this.$router.push('/orderNavigate/biding')
                }
            },
            switchSpinnerStatus(){
                this.spinnerStatus = !this.spinnerStatus
            },
            init(){
                this.userInfo = storage.getLocalstorage('user')
                this.handleGetCustomerOrderAction()
                this.handelGetBidOrderInfo()
            },
            handleGetCustomerOrderAction() {
                //获取用户行为
                getCustomerOrderAction(this.currentCar).then( res=> {
                    for( let key in res.data.action){
                        let direction = {'title':'','descriptionTime':''}
                        switch(key){
                            case '1':
                                direction['title'] = '进入询价'
                                direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                break
                            case '2':
                                direction['title'] = '已支付询价金'
                                direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                break
                            case '3':
                                direction['title'] = '进入拼单'
                                direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                break
                            case '4':
                                direction['title'] = '已支付拼单金'
                                direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                break
                            case '5':
                                direction['title'] = '已转入拼单'
                                direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                break
                            case '6':
                                direction['title'] = '已转入订单'
                                direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                break
                            case '7':
                                direction['title'] = '已付资源锁定金，等待联系'
                                direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                break
                            case '8':
                                direction['title'] = '订单失效'
                                direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                                break

                        }
                        this.directionlist.push(direction)
                    }
                    this.descriptionTime = this.directionlist[this.directionlist.length-1].descriptionTime
                    this.title = this.directionlist[this.directionlist.length-1].title
                })
            },
            handelGetBidOrderInfo() {
                //获取用户信息
                getBidOrderInfo(this.currentCar).then( res=> {
                    this.orderInfo = res.data.bidCar
                    this.orderInfo.submission = utils.time.formatDatetwo(this.orderInfo.submission)
                })
            },
            initPrice(formartPrice) {
                let price = utils.formatMoney(formartPrice,2)
                return price
            },
            initPriceYuan(formartPrice) {
                let price = utils.formatMoney(formartPrice, 2,status = 0)
                return price
            },
            formatTime(time){
                try{
                    return utils.time.formatDatetwo(time)
                 }catch(e){
                    '逻辑错误，期货拼单历史返回问题'
                }
            },
            goCarDetail(carSeriesId, carId){
                try{
                    this.obj.carSeriesId=carSeriesId
                    this.obj.carId = carId
                    //this.$store.dispatch('updateIsAuth', true)
                    this.$store.dispatch('showCarDetails',this.obj)
                    this.$router.push({
                        path: "/modelsOffer",
                    })
                }catch(e){
                    '逻辑错误，期货拼单历史返回问题'
                }
            },
            //如果订单支付失败 则重新支付
            goPayment(v) {
                this.$router.push({
                    name: "payAgain",
                    params: {
                        bidingOrderId:v.paymentNumber,
                    }
                })
            },
            //转入拼单
            affirmCrowdorder(v) {
                if(!v.bidPrice){
                    mui.alert('无报价，无法转入拼单', '提示', ['确定'], function() {},'div')
                    return
                }
                this.$router.push({
                    name: "affirmCrowdorder",
                    params: {
                        carParams: v,
                        customerId: this.userInfo.id
                    }
                })
            },
            // 下单页面 支付下单金额 
            placeOrder(v){
                if(!v.bidPrice){
                    mui.alert('无报价，无法立即下单！', '提示', ['确定'], function() {},'div')
                    return
                }
                // //console.log(v)
                this.$router.push({
                    name: "bidingPo",
                    params: {
                        carParams: v,
                    }
                })
            }
        },
        filters: {},
        computed: {
            isSurance(){
                if(this.currentCar.isSurance == '1'){
                    return '是'
                }
                else{
                    return '否'
                }
            },
            isloan(){
                if(this.currentCar.isloan == '1'){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        created() { 
            this.getParams()
        },
        mounted() {
            //初始化mui
			mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
			//主界面和侧滑菜单界面均支持区域滚动；
			 mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: false, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            });
        },
        destroyed() { }
    }

</script>


<style lang="scss" scoped>
    @import '~static/css/index.css';
    /*车型选择*/
    .mui-input-row label {
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        line-height: 1.1;
        float: left;
        width: 45px;
        padding: 12px 0px 10px 3px;
        font-size: 0.7rem;
        position: relative;
        left: -2px;
    }
    .mui-input-row label ~ input {
        float: left;
        padding-left: 10px !important;
    }
    .carlist {
        width: 100%;
        .lst {
            width: 100%;
            background: #fbfbfb;
            overflow: hidden;
            padding: 10px 12px 0px 12px;
            .lstImg {
                width: 38%;
                float: left;
                text-align: center;
                img {
                    width:120px;
                    vertical-align: middle;
                }
            }
            .lstMsg {
                width:62%;
                float: left;
                height: 100%;
                padding: 6px 0px 5px 15px;
                p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-wrap: break-word;
                    word-break: normal;
                    margin-bottom: 10px;
                }
            }
        }
        .lstbottom {
            width: 100%;
            background: #fff;
            overflow: hidden;
            padding: 0px 12px 0px 12px;
            p {
                margin-bottom: 0px;
                line-height: 35px;
            }
        }
        .lstTop{
            width:100%;
            background:#fff;
            font-size:0.6rem;
            line-height:36px;
            .titpic {
                overflow:hidden;
                padding:0px 12px 0px 8px;
                img{
                    width:36px;
                    height:36px;
                    margin-right:5px;
                    margin-top:3px;
                }
            }
            
        }
    }
    .carName {
        font-size: 0.7rem;
        color: #333;
        line-height: 15px;
        height: 28px;
    }

    .carColor {
        font-size: 0.6rem;
        line-height: 15px;
    }

    .carPrice {
        font-size: 0.6rem;
        line-height: 15px;
    }

    .carNaked {
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.7rem;
        color: #333;
    }
    .orderPrice{
        float:right;

    }
    .priceInfo{
        width:100%;
        height:26px;
        margin-top:5px;
    }
    .priceInfo .left{
        float:left;
        margin-left:15px;
        color:#333333;
        font-size: 13px;
    }
    .priceInfo .right{
        float:right;
        margin-right:12px;
    }
    .orderInfo {
        width:100%;
        margin-bottom:10px;
        height:12px;
        line-height: 12px;
    }
    .orderInfo .left{
        float:left;
        margin-left:15px;
        color:#666666;

    }
    //地址
    .icon-dingw{
    display: inline-block;
    font-size:20px;
    float:left;
    padding-top:10px;
    }
    .address-info{
    display: inline-block;
    margin-left:10px;
    width:80%
    }
    .address-name{
    font-size:14px;
    }
    .mui-table-view-cell:last-child:after {
        height: 0;
    }
    .i-c {
    float:right;
    font-size: 1.1rem;
    height:100%;
    padding-top:10px;
    position: relative;
    margin-right: 10px;
    }
    .userpams{
    font-size:12px;
    }

    //下拉组件
    .spinner{
        width:100%;
        height:40px;
        background: #fff;
        border-top: 1px solid #e9e9e9;
    }
    .spinner .left{
        height:40px;
        line-height: 40px;
        margin-left: 15px;
        color: #ff6a27;
    }
    .spinner .right{
       transform:rotate(90deg);
       -ms-transform:rotate(90deg); 	/* IE 9 */
       -moz-transform:rotate(90deg); 	/* Firefox */
       -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
       -o-transform:rotate(90deg); 	/* Opera */
    }
    .icon-liucheng-01{
        font-size:22px;
        position: relative;
        top: 5px;
        display:inline-block;      
    }
    .footer{
        background-color: #fff;
        border-top: 1px solid #ddd;
        border-bottom: 0px solid #ddd;
        box-shadow: 0 0 0px #d2d2d2;
    }
    /*转入拼单*/
    .affirmCrowdorder {
        color: #ff6a27;
        position: absolute;
        height:50px;
        line-height:50px;
        text-align: center;
        width:30%;
        right:30%;
        font-size: 0.75rem;
        //border-left: 1px solid #ff6a27;
    }
    /*立即订单*/
    .placeOrder{
        background:#ff6a27;
        color: #fff;
        position: absolute;
        height:50px;
        line-height:50px;
        text-align: center;
        width:30%;
        right:0px;
        font-size: 0.75rem;
        border: 1px solid #ff6a27;
    }
    .unuse{
        color: #8f8f94!important;
    }
    .lineItem{
        margin-bottom:50px;
    }
</style>